<template>
  <div>
    <div class="btnBoxDiv">
      <span class="btnBoxDivOne">{{typeName}}</span>
    </div>
    <div class="btnBoxDivTwo">
      <div v-for="(item,index) in configName" class="btnBoxDivThree">
        <button-type @clickbut="catchEmit($event)" :is-can-can-cel="isCCC" border-col="blue" :is-long-light="index == indexs" :col-name="item"/>
      </div>
    </div>
  </div>
</template>

<script>
  import ButtonType from "./ButtonType";

  export default {
    name: "ButtonBox",
    components: {
      ButtonType
    },
    methods: {
      catchEmit(event){
        this.$emit("submitdeta",{configName: event.configName});
      },
      updateSelect(){
        let index = 0;
        this.configName.filter(config => {
          if(config == this.currentValue) {
            this.indexs = index;
            return;
          }
          ++index;
        });
        if (this.currentValue == "") this.indexs = -1;
      }
    },
    created() {
      this.updateSelect();
    },
    watch: {
      currVal(newVal,oldVal){
        this.currentValue = newVal;
        this.updateSelect();
      }
    },
    props: {
      configName: {
        type: Array
      },
      typeName: {
        type: String
      },
      currVal: {
        type: Object
      },
      isCanCanCel: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        configName: this.configName,
        typeName: this.typeName,
        currentValue: this.currVal,
        indexs: 0,
        isCCC: this.isCanCanCel
      }
    }
  }
</script>

<style scoped>
  .btnBoxDiv {
    margin-top: 10px;
    margin-bottom: 15px
  }

  .btnBoxDivOne {
    font-size: 14px
  }

  .btnBoxDivTwo {
    display: flex;
    flex-wrap: wrap
  }

  .btnBoxDivThree {
    margin: 0px 23px 20px 0px;
  }
</style>
